<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_CSS选择器</title>
    <style>
      /*标签名选择器*/
      h4 {
        color: darkgrey;
      }
      /*id选择器*/
      #d1{
        width:100px;
        height:100px;
        background-color: cyan;
      }
      /*类选择器*/
      .msg{
        color: aliceblue;
      }
      .error{
        background-color: red;
      }
      .success{
        background-color: green;
      }
      /*并列选择器：紧挨在一起写,必须同时满足才能生效*/
      /*hover:悬停效果*/
      #d1:hover{
        background-color: mediumpurple;
      }
      /*群组选择器:使用逗号隔开，只要满足其中一个就会生效*/
      h4,#d1,.error{
          /*边框:粗细 线性（单实线）颜色*/
          border:5px solid black;
      }
      p{
          border:5px double red;
      }
        /*6.伪类选择器:选中的是一个时刻或某种状态*/
      a:link{color:grey;}/*超链接未被访问过*/
      a:visited{color:cornflowerblue;}/*超链接已经被访问过*/
      a:hover{color:palevioletred;}/*超链接悬停，不是超链接所独有的*/
      a:active{color:yellowgreen;}/*超链接被激活*/

      /*7.属性选择器*/
      input[name="uname"]{
          background-color: aquamarine;
      }

      /*8.通用选择器*/
    *{
        font-style:italic;
    }

      /*9. 后代选择器*/
      #d2 span{
          background-color: palevioletred;
      }

      /*10.直接子代选择器*/
      #d2>div>p>span{
        color:green;
      }
    </style>
</head>
<body>

    <div id="d1">我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <p>我是段落</p>
    <h4>我是h4</h4>
    <h4>我是h4</h4>
    <h4>我是h4</h4>
    <hr>
    <hr>
  <span class="error msg">用户名不能为空</span>
  <span class="error msg">密码不一致</span>
  <span class="error msg">身份证验证失败</span>
  <span class="success msg">身份证验证成功</span>
  <span class="success msg">邮箱格式正确</span>

  <hr>
  <a href="https://www.baidu.com">超链接1</a>
  <a href="abc">超链接2</a>
  <hr>

    <input type="text" name="uname">
    <input type="text" name="nickname">
    <select name="sex">
      <option value="1">男</option>
      <option value="2">女</option>
    </select>

    <hr>
    <div id="d2">
        <span>111</span>
        <div>
            <span>222</span>
            <p>测试文字</p>
            <p>我是<span>333</span>段落</p>
        </div>
        <span>444</span>
    </div>

</body>
</html>